<template>
    <view>
        <u-navbar :is-back="false" title="我的好友" :background="background" title-color="#efefef">
            <view>
                <view class="left" @click="returnPrevious()">
                    <u-icon name="arrow-left" color="#efefef" size="40"></u-icon>
                    <!-- fanhui -->
                </view>
            

            <view class="top">
                
                <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#ff0000">
                </u-tabs>
            </view>
            </view>
        </u-navbar>
        <view class="wrap">
           <!-- <view class="box">
                
                <view class="author">
                    <view class="avatar">
                        <u-avatar src="/static/avator.png"></u-avatar>
                    </view>
                    <view class="user">
                        机械
                    </view>
                    </view>
            </view>
            <view class="box">
                
                <view class="author">
                    <view class="avatar">
                        <u-avatar src="/static/avator.png"></u-avatar>
                    </view>
                    <view class="user">
                        机械
                    </view>
                    </view>
            </view> -->




            <view class="content" v-if="current==0">
                <view class="nolist" v-if="attentionList.length==0">
                    暂无数据
                </view>
                <view v-for="item in attentionList" :key="item.id">
                    <view class="box">
                        
                        <view class="author">
                            <view class="avatar">
                                <u-avatar :src="item.avatar"></u-avatar>
                            </view>
                            <view class="user">
                               {{item.userName}}
                            </view>
                            </view>
                    </view>
                </view>
            </view>
            <view class="content" v-if="current==1">
                <view class="nolist" v-if="followList.length==0">
                    暂无数据
                </view>
                <view v-for="(item,index) in followList" :key="item.id">
                        <view class="box">
                            
                            <view class="author">
                                <view class="avatar">
                                    <u-avatar :src="item.avatar"></u-avatar>
                                </view>
                                <view class="user">
                                   {{item.userName}}
                                </view>
                                </view>
                        </view>
                </view>
            </view>
            
        </view>

    </view>
</template>

<script>
    import {
        listAttentionMe,
        listMyAttention,
    } from "@/api/data.js"
    import {
        FIlE_PATH
    } from "@/common/index.js"
    export default {
        data() {
            return {
                background: {
                    // backgroundColor: '#ffffff',
                    backgroundImage: 'linear-gradient(45deg, rgb(255, 40, 0), rgb(147, 0, 0))'
                },
                list: [{
                    name: '我的关注'
                }, {
                    name: '我的粉丝'
                }],
                current: 0,
                attentionList:[],
                followList:[],
                filePath: '',
                userId:0,
            }
        },
        onLoad(options) {
            this.userId = options.userId
            console.log(this.userId)
        },
        onShow() {
            // this.getSiteList()
            // this.getPersonageList()
            // this.getAttentionTravels()
            this.listAttentionMe()
            this.listMyAttention()
            this.filePath = FIlE_PATH
        },
        methods: {
            change(index) {
                this.current = index;
                console.log(index)
            },
            
            returnPrevious(){
                uni.navigateBack({
                    delta: 1
                });
            },
            listAttentionMe(){
                const _this=this
                listAttentionMe({
                    id : this.userId
                }).then(function(res){
                    _this.followList=res.data.data
                })
            },
            listMyAttention(){
                const _this=this
                listMyAttention({
                    id : this.userId
                }).then(function(res){
                    _this.attentionList=res.data.data
                })
            }
            
        }
    }
</script>

<style lang="scss" scoped>
    .left {
        float: left;
        margin-left: 30rpx;
        margin-top: 100rpx;
    }

    .top {
        width: 750rpx;
        // margin: 0 auto;
        margin-top: 150rpx;

    }

    .wrap {
        display: flex;
        flex-direction: column;
        // height: 100vh;
        min-height: calc(100vh - var(--window-top));
        width: 100%;
        background-color: #f5f5f5;
        margin-top: 80rpx;
        // background-color: #fff9ee;
    }

    .content {
        width: 720rpx;
        margin: 0 auto;
    }

    .box {
        padding: 20rpx 30rpx;
        // margin-top: 30rpx;
        // margin-top: 20rpx;
        background: #fff;
        border: 3rpx solid #ddd;
        border-radius: 20rpx;
    }

    .u-body-item {
        // font-size: 28rpx;
        color: #424242;
    }

    .u-body-item image {
        width: 220rpx;
        flex: 0 0 40%;
        height: 200rpx;
        border-radius: 8rpx;
        margin-left: 12rpx;
    }

    .title {
        font-size: 38rpx;
        font-weight: bold;
        margin-bottom: 50rpx;
        height: 100rpx;
        color: #515151;
        // height: 60%;
        // width: 70%;

    }
    .traveltitle{
        font-size: 38rpx;
        font-weight: bold;
        margin-bottom: 50rpx;
        max-height: 120rpx;
        color: #515151;
        // height: 60%;
        // width: 70%;

    }

    .brief {
        font-size: 28rpx;
        color: #8e8e8e;
        margin-bottom: 10rpx;
    }

    .footer {

        // font-size: 30rpx;
        // color: #747474;
        .siteauthor {
            display: inline-block;
            font-size: 30rpx;
            color: #5a5a5a;
        }

        .sitetime {
            display: inline-block;
            font-size: 28rpx;
            color: #747474;
            margin-left: 20rpx;
        }

        // height: 20%;
    }

    .main {
        flex: 0 0 60%;
    }
    .travelmain{
        flex: 0 0 1;
    }
    .nolist {
        font-size: 50rpx;
        margin: 200rpx auto;
        width: 750rpx;
        text-align: center;
        color: #3F536E;
    }
    .author {
        // margin: 0 20rpx;
        // padding: 15rpx 40rpx;
        // background: #F1F1F1;
        // border-radius: 20rpx;
    
        .avatar,
        .user {
            margin-right: 20rpx;
            display: inline-block;
            vertical-align: middle;
            font-size: 30rpx;
        }
    
        .follow {
            float: right;
            vertical-align: middle;
        }
    }
</style>
